<!--购物卡结佣模块组件 经纪人信息和-订单详情组件-->
<template>
  <div class="xkCommission">
    <div class="textTitle">经纪人信息：</div>
    <table width="100%">
      <tr>
        <td>姓名：</td>
        <td>{{brokerApply.idCardName}}</td>
        <td>手机号：</td>
        <td>{{brokerApply.brokerPhone}}</td>
      </tr>
      <tr>
        <td>身份证：</td>
        <td>{{brokerApply.idCard}}</td>
        <td>角色：</td>
        <td>{{role}}</td>
      </tr>
      <tr>
        <td>所属公司：</td>
        <td>{{brokerApply.companyName}}</td>
        <td>购物卡总额：</td>
        <td>{{applyAmount}}</td>
      </tr>
    </table>
    <div class="textTitle">订单明细：</div>
    <div class="textSub">
      <span>
        <b>金额合计：</b>
        ￥{{totalAmount}}元
      </span>
      <span>
        <b>订单数量：</b>
        {{awardInfoList.length}}
      </span>
    </div>
    <el-table :data="awardInfoList" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="orderId" label="订单号"></el-table-column>
      <el-table-column align="center" prop="customerName" label="客户姓名"></el-table-column>
      <el-table-column align="center" :formatter="customerPhone" label="手机号"></el-table-column>
      <el-table-column align="center" prop="devName" label="楼盘"></el-table-column>
      <el-table-column align="center" prop="houseNum" label="房间号"></el-table-column>
      <el-table-column align="center" v-if="sourceCategory" prop="followType" label="结佣类别">
        <template slot-scope="scope">
          <span>{{category(scope.row.followType)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :formatter="awardAmount" label="奖励金额（元）"></el-table-column>
      <el-table-column align="center" label="奖励方式">
        <template slot-scope="scope">
          <span v-if="scope.row.awardType == 1">购物卡</span>
          <span v-else>现金</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :formatter="shopCardAmount" label="购物卡（元）"></el-table-column>
      <el-table-column align="center" v-if="brokerApply.isRecord" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.orderId,scope.row.sourceCategory)" type="text" size="small">结佣详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--结佣详情弹窗-->
    <el-dialog :visible.sync="dialogTableVisible" width="40%">
      <el-table border :data="orderDetailList">
        <el-table-column property="typeName" label="购物卡类别"></el-table-column>
        <el-table-column property="cardCode" label="卡号"></el-table-column>
        <el-table-column property="cardDenomination" label="面额（元）"></el-table-column>
        <el-table-column label="电子卡/实体卡">
          <template slot-scope="scope">
            <span v-if="scope.row.cardMedia === 1">电子卡</span>
            <span v-else>实体卡</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import api from '../../api/apiPath' 
import utils from '@/common/utils'
export default {
  name: "commission",
  props: {
    brokerApply: Object,
    awardInfoList: {
      type: Array
    }
  },
  data() {
    return {
      orderNum: 0,
      orderDetailList: [],
      dialogTableVisible: false,
      sourceCategory: ''
    };
  },
  watch: {
    awardInfoList(val) {
      if(val[0].sourceCategory == 2) {
        this.sourceCategory = false
      }else {
        this.sourceCategory = true
      }
    }
  },
  computed: {
    // 金额合计
    totalAmount() {
      let nums = '';
      nums = utils.formatMoney(this.awardInfoList.reduce((p, e) => p + e.awardAmount, 0))
      return nums
    },
    applyAmount() {
      return `￥${utils.formatMoney(this.brokerApply.applyAmount)}`
    },
    role() {
      let roles = this.brokerApply.brokerType;
      if (roles == 0) {
        return "网络推客";
      } else if (roles == 1) {
        return "兼职经纪人";
      } else if (roles == 2) {
        return "案场销售";
      } else if (roles == 3) {
        return "职业经纪人";
      } else if (roles == 4) {
        return "经纪门店";
      } else if (roles == 5) {
        return "经纪公司";
      }else if(roles == 6) {
        return '置业顾问'
      }else if(roles == 7) {
        return '开发商'
      }else if(roles == 8) {
        return '销售经理'
      }
    }
  },
  methods: {
    // 手机号
    customerPhone(row) {
      return utils.formatPhoneNumber(row.customerPhone)
    },
    awardAmount(row) {
      return `￥${utils.formatMoney(row.awardAmount)}`
    },
    // 购物卡金额
    shopCardAmount(row) {
      return `￥${utils.formatMoney(row.shopCardAmount)}`
    },
    handleClick(orderId,sourceCategory) {
      this.axios.post(api.getSettleRecordDetail,{orderId: orderId,terminalSource:sourceCategory}).then(data=>{
        let res = data.data;
        if(res.code === 200) {
          this.orderDetailList = res.data.data.list;
          this.orderDetailList.forEach(item => {
            item.cardDenomination = utils.formatMoney(item.cardDenomination)
          })
          this.dialogTableVisible = true;
        }
      })
    },
    // 购物卡类别
    category(type) {
      if (type == "NONE") {
        return "暂无跟进";
      } else if (type == "COMMON") {
        return "常规跟进";
      } else if (type == "REPORT") {
        return "报备";
      } else if (type == "LOOK") {
        return "带看";
      } else if (type == "PURCHASE") {
        return "认购";
      } else if (type == "SIGN") {
        return "签约";
      } else if (type == "RAISE") {
        return "认筹";
      } else if (type == "SALING") {
        return "在售项目";
      } else if (type == "REFUND_RAISE") {
        return "退认筹";
      } else if (type == "REFUND_PURCHASE") {
        return "退认购";
      } else if (type == "INITIAL") {
        return "草签";
      } else if (type == "CUSTOM") {
        return "自定义";
      } else if (type == "CANCELL_AFTER_VERUFY") {
        return "核销";
      } else if (type == "STEP_JUMP") {
        return "跳点";
      } else {
        return "未知";
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.xkCommission {
  font-size: 14px;
  .textTitle {
    line-height: 40px;
    margin-top: 20px;
  }

  .textSub {
    width: 100%;
    padding-left: 5px;
    box-sizing: border-box;
    background: #eceaea;
    line-height: 35px;
  }

  table {
    border-collapse: collapse;
    margin: 0 auto;
  }

  table tr td {
    border: 1px solid #ccc;
    line-height: 40px;
    text-align: center;
  }
}
</style>


